<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>泵控制面板</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../static/css/main.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <!-- 头部区域 -->
    <header>
      <div class="header-content">
        <h1><i class="fas fa-flask"></i> 泵控制面板</h1>
      </div>
    </header>

    <!-- 系统状态栏 -->
    <div class="status-bar">
      <div class="status-item">
        <div class="status-indicator" id="tec-status-indicator"></div>
        <span>加热装置: <strong id="tec-status-text">未知</strong></span>
      </div>
      <div class="status-item">
        <div class="status-indicator" id="pump-status-indicator"></div>
        <span>流体泵: <strong id="pump-status-text">未知</strong></span>
      </div>
      <div class="status-item">
        <div class="status-indicator" id="device-status-indicator"></div>
        <span>设备状态: <strong id="device-status-text">空闲</strong></span>
      </div>
      <div class="status-item">
        <div class="status-indicator" id="reagent-status-indicator"></div>
        <span>试剂配置: <strong id="reagent-status-text">未配置</strong></span>
      </div>
      <div class="status-item">
        <div class="status-indicator" id="flow-status-indicator"></div>
        <span>反应流程: <strong id="flow-status-text">未选择</strong></span>
      </div>
      <div class="status-item">
        <div class="status-indicator success"></div>
        <span>温度: <strong id="temp-status-text">25°C</strong></span>
      </div>
    </div>

    <!-- 当前配置信息栏 -->
    <div class="current-config-bar">
      <div class="config-info">
        <i class="fas fa-flask"></i>
        <span>当前试剂配置: <strong id="current-reagent-config">未选择</strong></span>
      </div>
      <div class="config-info">
        <i class="fas fa-cogs"></i>
        <span>当前反应流程: <strong id="current-inject-config">未选择</strong></span>
      </div>
    </div>

    <!-- 暂停状态信息区域 - 将由JavaScript动态创建 -->

    <!-- 通知消息 -->
    <div id="notification" class="message" style="display: none;">
      <i class="fas fa-info-circle"></i> 
      <span id="notification-text"></span>
    </div>

    <!-- 主要操作区域 -->
    <form id="main-form" method="post">
      <div class="dashboard">
        
        <!-- 1. 设备初始化 -->
        <div class="card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-power-off"></i>
            </div>
            <div class="card-title">设备初始化</div>
          </div>

          <div class="tip">
            <strong>启动前检查：</strong>
            <ol>
              <li>确认设备电源连接正常</li>
              <li>检查所有管路连接牢固</li>
              <li>确保设备处于初始位置</li>
              <li>首次使用必须执行初始化</li>
            </ol>
          </div>

          <div class="action-line">
            <label class="checkbox-label">
              <input type="checkbox" id="reset_check" /> 
              <span>设备检查完毕</span>
            </label>
            <button type="button" name="action" value="reset" id="reset_btn" class="warning" disabled>
              <i class="fas fa-sync-alt"></i> 初始化设备
            </button>
          </div>
        </div>

        <!-- 3. 管路清洗 -->
        <div class="card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-shower"></i>
            </div>
            <div class="card-title">管路清洗</div>
          </div>

          <div class="tip">
            <strong>清洗准备：</strong>
            <ol>
              <li>1号管道连接废液容器</li>
              <li>确认2号管道通畅</li>
              <li>3-9号管道浸入纯水中</li>
              <li>预计清洗时间约5分钟</li>
            </ol>
          </div>

          <div class="action-line">
            <label class="checkbox-label">
              <input type="checkbox" id="wash_check" /> 
              <span>清洗准备就绪</span>
            </label>
            <button type="button" name="action" value="wash" id="wash_btn" class="primary" disabled>
              <i class="fas fa-pump-soap"></i> 开始清洗
            </button>
          </div>
        </div>

        <!-- 4. 管路排空 -->
        <div class="card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-wind"></i>
            </div>
            <div class="card-title">管路排空</div>
          </div>

          <div class="tip">
            <strong>排空准备：</strong>
            <ol>
              <li>1号管道连接废液容器</li>
              <li>确认2号管道通畅</li>
              <li>3-9号针管置于空试管中</li>
              <li>预计排空时间约3分钟</li>
            </ol>
          </div>

          <div class="action-line">
            <label class="checkbox-label">
              <input type="checkbox" id="empty_check" /> 
              <span>排空准备就绪</span>
            </label>
            <button type="button" name="action" value="empty" id="empty_btn" class="primary" disabled>
              <i class="fas fa-fan"></i> 开始排空
            </button>
          </div>
        </div>

        <!-- 2. 试剂配置 -->
        <div class="card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-fill-drip"></i>
            </div>
            <div class="card-title">试剂配置</div>
          </div>

          <div class="tip">
            <strong>端口分配：</strong>
            <ol>
              <li>1号端口：Chamber（固定）</li>
              <li>2号端口：Air（固定）</li>
              <li>3-9号端口：可配置试剂</li>
              <li>选择或创建配置后应用</li>
            </ol>
          </div>

          <button type="button" class="modal-btn" id="reagent-config-btn">
            <i class="fas fa-cog"></i> 管理试剂配置
          </button>

          <div class="action-line">
            <label class="checkbox-label">
              <input type="checkbox" id="fill_check" /> 
              <span>试剂配置完成</span>
            </label>
            <button type="button" name="action" value="fill_tube" id="fill_btn" class="success" disabled>
              <i class="fas fa-tint"></i> 填充管路
            </button>
          </div>
        </div>

        <!-- 5. 反应流程 -->
        <div class="card">
          <div class="card-header">
            <div class="card-icon">
              <i class="fas fa-vial"></i>
            </div>
            <div class="card-title">反应流程</div>
          </div>

          <div class="tip">
            <strong>执行要求：</strong>
            <ol>
              <li>确保已选择试剂配置</li>
              <li>选择对应的反应流程</li>
              <li>检查温度控制正常</li>
              <li>确认所有前置步骤完成</li>
            </ol>
          </div>

          <button type="button" class="modal-btn" id="inject-config-btn">
            <i class="fas fa-sliders-h"></i> 管理反应流程
          </button>

          <div class="action-line">
            <label class="checkbox-label">
              <input type="checkbox" id="reaction_check" /> 
              <span>反应准备就绪</span>
            </label>
            <button type="button" name="action" value="reaction" id="reaction_btn" class="primary" disabled>
              <i class="fas fa-play"></i> 开始反应
            </button>
          </div>
        </div>

      </div>
    </form>

    <!-- 快捷控制面板 -->
    <div class="control-panel">
      <div class="control-card">
        <i class="fas fa-undo-alt"></i>
        <h3>设备复位</h3>
        <p>重置设备到初始状态</p>
        <button type="button" name="action" value="reset" class="warning" id="reset-card-btn">
          <i class="fas fa-undo"></i> 执行复位
        </button>
      </div>

      <div class="control-card">
        <i class="fas fa-stop-circle"></i>
        <h3>紧急停止</h3>
        <p>立即终止所有正在进行的操作</p>
        <button type="button" name="action" value="stop" class="danger" id="stop-card-btn">
          <i class="fas fa-stop"></i> 紧急停止
        </button>
      </div>

      <div class="control-card">
          <i class="fas fa-pause-circle"></i>
          <h3>暂停/继续</h3>
          <p>暂停当前反应或从暂停点继续</p>
          <button type="button" name="action" value="pause" class="warning" id="pause-btn">
              <i class="fas fa-pause"></i> 暂停反应
          </button>
          <button type="button" name="action" value="resume" class="success" id="resume-btn" style="display:none;">
              <i class="fas fa-play"></i> 继续反应
          </button>
      </div>

      <div class="control-card">
        <i class="fas fa-chart-line"></i>
        <h3>系统日志</h3>
        <p>查看设备运行日志和状态</p>
        <button type="button" class="primary" id="log-btn" onclick="window.open('/log', '_blank')">
          <i class="fas fa-file-alt"></i> 查看日志
        </button>
      </div>
    </div>

  </div>

<!-- 试剂配置模态框 - 优化版本 -->
<div class="modal" id="reagent-modal">
  <div class="modal-content" style="max-width: 900px;">
    <div class="modal-header">
      <div class="modal-title">
        <i class="fas fa-flask"></i> 试剂配置管理
      </div>
      <button class="close-modal">&times;</button>
    </div>

    <div class="modal-body">
      <!-- 第一步：配置管理 -->
      <div class="config-manage-section">
        <h4><i class="fas fa-folder-open"></i> 第一步：选择或创建配置</h4>
        
        <!-- 加载已有配置 -->
        <div class="form-row">
          <div class="form-group">
            <label>选择已有配置:</label>
            <select id="config_select" style="width: 100%;">
              <option value="">--选择配置--</option>
            </select>
          </div>
          <div class="button-group">
            <button class="primary" id="load_config_btn" type="button">
              <i class="fas fa-download"></i> 加载配置
            </button>
            <button class="danger" id="delete_config_btn" type="button">
              <i class="fas fa-trash-alt"></i> 删除配置
            </button>
          </div>
        </div>
        
        <div class="divider" style="border-top: 1px solid #dee2e6; margin: 15px 0;"></div>
        
        <!-- 保存新配置 -->
        <div class="form-row">
          <div class="form-group">
            <label>配置名称:</label>
            <input type="text" id="config_name_input" placeholder="输入新配置名称" style="width: 100%;">
            <small style="color: #6c757d;">配置表单内容后，输入名称并保存</small>
          </div>
          <div class="button-group">
            <button class="success" id="save_new_config_btn" type="button">
              <i class="fas fa-save"></i> 保存配置
            </button>
          </div>
        </div>
      </div>

      <!-- 第二步：端口配置 -->
      <div class="port-config-section">
        <h4><i class="fas fa-list"></i> 第二步：配置端口试剂</h4>
        <div class="reagent-table-wrapper">
          <div class="reagent-table">
            <div class="reagent-row header">
              <span>端口</span>
              <span>试剂名称</span>
              <span>说明</span>
            </div>
            <div class="reagent-table-body">
              <div class="reagent-row">
                <span class="port-number">1</span>
                <input type="text" name="reagent1" value="chamber" readonly />
                <span class="port-desc">反应腔（固定）</span>
              </div>
              <div class="reagent-row">
                <span class="port-number">2</span>
                <input type="text" name="reagent2" value="air" readonly />
                <span class="port-desc">空气管（固定）</span>
              </div>
              <div class="reagent-row">
                <span class="port-number">3</span>
                <input type="text" name="reagent3" placeholder="输入试剂名称" />
                <span class="port-desc">可配置试剂</span>
              </div>
              <div class="reagent-row">
                <span class="port-number">4</span>
                <input type="text" name="reagent4" placeholder="输入试剂名称" />
                <span class="port-desc">可配置试剂</span>
              </div>
              <div class="reagent-row">
                <span class="port-number">5</span>
                <input type="text" name="reagent5" placeholder="输入试剂名称" />
                <span class="port-desc">可配置试剂</span>
              </div>
              <div class="reagent-row">
                <span class="port-number">6</span>
                <input type="text" name="reagent6" placeholder="输入试剂名称" />
                <span class="port-desc">可配置试剂</span>
              </div>
              <div class="reagent-row">
                <span class="port-number">7</span>
                <input type="text" name="reagent7" placeholder="输入试剂名称" />
                <span class="port-desc">可配置试剂</span>
              </div>
              <div class="reagent-row">
                <span class="port-number">8</span>
                <input type="text" name="reagent8" placeholder="输入试剂名称" />
                <span class="port-desc">可配置试剂</span>
              </div>
              <div class="reagent-row">
                <span class="port-number">9</span>
                <input type="text" name="reagent9" placeholder="输入试剂名称" />
                <span class="port-desc">可配置试剂</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 第三步：应用说明 -->
      <div class="info-box">
        <i class="fas fa-info-circle"></i>
        <strong>第三步：</strong>配置完成后，先保存配置，然后选择要应用的配置，最后点击"应用到系统"
      </div>
    </div>

    <div class="modal-footer">
      <button class="primary" id="apply_reagent_config">
        <i class="fas fa-check"></i> 应用选中配置到系统
      </button>
      <button class="secondary close-modal">
        <i class="fas fa-times"></i> 关闭
      </button>
    </div>
  </div>
</div>

<!-- 反应流程配置模态框 - 优化版本 -->
<div class="modal" id="inject-modal">
  <div class="modal-content" style="max-width: 1000px;">
    <div class="modal-header">
      <div class="modal-title">
        <i class="fas fa-cogs"></i> 反应流程管理
      </div>
      <button class="close-modal">&times;</button>
    </div>

    <div class="modal-body" style="padding: 20px;">
      <!-- 第一步：流程管理 -->
      <div class="config-manage-section">
        <h4><i class="fas fa-folder-open"></i> 第一步：选择或创建流程</h4>
        
        <!-- 当前试剂配置提示 -->
        <div class="info-box" style="margin-bottom: 15px;">
          <i class="fas fa-flask"></i>
          关联试剂配置: <strong id="linked-reagent-config">未选择</strong>
          <small style="display: block; margin-top: 5px;">
            反应流程必须基于已应用的试剂配置创建
          </small>
        </div>
        
        <!-- 加载已有流程 -->
        <div class="form-row">
          <div class="form-group">
            <label>选择已有流程:</label>
            <select id="inject-config-select" style="width: 100%;">
              <option value="">--选择流程--</option>
            </select>
          </div>
          <div class="button-group">
            <button type="button" class="primary" id="load-inject-config-btn">
              <i class="fas fa-download"></i> 加载流程
            </button>
            <button type="button" class="danger" id="delete-inject-config-btn">
              <i class="fas fa-trash-alt"></i> 删除流程
            </button>
          </div>
        </div>

        <div class="divider" style="border-top: 1px solid #dee2e6; margin: 15px 0;"></div>

        <!-- 保存新流程 -->
        <div class="form-row">
          <div class="form-group">
            <label>流程名称:</label>
            <input type="text" id="new-inject-config-name" placeholder="输入新流程名称" style="width: 100%;">
            <small style="color: #6c757d;">配置步骤后，输入名称并保存</small>
          </div>
          <div class="button-group">
            <button type="button" class="success" id="save-inject-config-btn">
              <i class="fas fa-save"></i> 保存流程
            </button>
          </div>
        </div>
      </div>

      <!-- 第二步：步骤配置 -->
      <div style="margin-top: 20px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
          <h4><i class="fas fa-list-ol"></i> 第二步：配置反应步骤 <span class="step-count">(0 步)</span></h4>
          <div style="display: flex; gap: 8px;">
            <button type="button" class="success" id="add-step-btn" style="padding: 6px 12px; font-size: 0.9rem;">
              <i class="fas fa-plus"></i> 添加步骤
            </button>
            <button type="button" class="warning" id="clear-steps-btn" style="padding: 6px 12px; font-size: 0.9rem;">
              <i class="fas fa-broom"></i> 清空步骤
            </button>
          </div>
        </div>

        <!-- 步骤表格 -->
        <div class="steps-table">
          <div class="steps-header-row">
            <span>步骤</span>
            <span>试剂</span>
            <span>次数</span>
            <span>等待时间(秒)</span>
            <span>温度(°C)</span>
            <span>操作</span>
          </div>
          <div id="steps-container">
            <div class="empty-steps-row">
              <div style="text-align: center; padding: 30px; color: #999;">
                <i class="fas fa-plus-circle" style="font-size: 2rem; margin-bottom: 10px;"></i>
                <p>暂无步骤，点击"添加步骤"开始配置</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 统计信息 -->
      <div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 6px;">
        <h4 style="margin-bottom: 10px;"><i class="fas fa-chart-bar"></i> 流程统计</h4>
        <div style="display: flex; gap: 30px; font-size: 0.9rem;">
          <span>总步骤: <strong id="total-steps">0</strong></span>
          <span>预计时间: <strong id="total-time">0分钟</strong></span>
          <span>温度范围: <strong id="temp-range">-</strong></span>
        </div>
      </div>

      <!-- 第三步：应用说明 -->
      <div class="info-box" style="margin-top: 15px;">
        <i class="fas fa-info-circle"></i>
        <strong>第三步：</strong>步骤配置完成后，先保存流程，然后选择要应用的流程，最后点击"应用到系统"
      </div>
    </div>

    <div class="modal-footer">
      <button class="primary" id="apply-inject-config">
        <i class="fas fa-check"></i> 应用选中流程到系统
      </button>
      <button class="secondary close-modal">
        <i class="fas fa-times"></i> 关闭
      </button>
    </div>
  </div>
</div>

  <script src="../static/js/main.js"></script>
</body>
</html>